<template>
    <view class="content">
        <view class="index-img">
            <u-swiper :list="data.images" width="750" height="375" border-radius="0" mode="none"></u-swiper>
        </view>
        <view class="wrapper">
            <view class="name-box">
                <image src="../../static/image/img_01.png" class="img-01" v-if="data.status == 1 || data.status == 2"></image>
                <image src="../../static/image/img_02.png" class="img-01" v-if="data.status == 3"></image>
                <view class="name">{{data.title}}</view>
            </view>
            <view class="sub">{{data.describes}}</view>
            
            <!-- is_enroll 报名人数: 1显示 2隐藏 -->
            <view class="num-box" v-if="data.is_enroll == 1">
                <view class="u-flex">
                    <view class="u-p-r-20">{{data.num}}人已报名：</view>
                    <view class="u-flex u-p-r-45">
                        <!-- 男 -->
                        <image src="../../static/icon/male.png" class="male-icon"></image>
                        <view>{{data.male_num}}</view>
                    </view>
                    <view class="u-flex">
                        <!-- 女 -->
                        <image src="../../static/icon/female.png" class="male-icon"></image>
                        <view>{{data.female_num}}</view>
                    </view>
                </view>
                <view class="num-box-down">
                    <view class="line">
                        <u-line-progress active-color="#ffcb67" inactive-color="#d6dbeb" :percent="percent" height="8" :show-percent="false"></u-line-progress>
                    </view>
                    <view class="sy-num">剩余名额：<text>{{data.surplus_num}}</text></view>
                </view>
            </view>
            
            <view class="item p-tb border-b">
                <view class="item-left">
                    <image src="../../static/icon/time_03.png" class="time-03"></image>
                    <view>报名时间</view>
                </view>
                <view class="time">{{data.enroll_start}} - {{data.enroll_end}}</view>
            </view>
            <view class="item u-p-t-30">
                <view class="item-left">
                    <image src="../../static/icon/time_03.png" class="time-03"></image>
                    <view>开始时间</view>
                </view>
                <view class="time">{{data.start_time}}</view>
            </view>
            <view class="item u-p-t-10 u-p-b-30 border-b">
                <view class="item-left">
                    <image src="../../static/icon/time_03.png" class="time-03"></image>
                    <view>结束时间</view>
                </view>
                <view class="time">{{data.end_time}}</view>
            </view>
            <view class="item p-tb">
                <view class="item-left">
                    <image src="../../static/icon/add.png" class="time-03"></image>
                </view>
                <view class="time">{{data.address}}</view>
                <image src="../../static/icon/i_08.png" class="i-08"></image>
            </view>
        </view>
        
        <view class="list" v-if="data.theme">
            <view class="list-title">
                <image src="../../static/icon/i_01.png" class="i-01"></image>
                <view>本期主题</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.theme"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.notice">
            <view class="list-title">
                <image src="../../static/icon/i_02.png" class="i-01"></image>
                <view>活动须知</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.notice"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.conditions">
            <view class="list-title">
                <image src="../../static/icon/i_03.png" class="i-01"></image>
                <view>报名条件</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.conditions"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.feature">
            <view class="list-title">
                <image src="../../static/icon/i_04.png" class="i-01"></image>
                <view>活动特色</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.feature"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.link">
            <view class="list-title">
                <image src="../../static/icon/i_05.png" class="i-01"></image>
                <view>活动环节</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.link"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.note">
            <view class="list-title">
                <image src="../../static/icon/i_06.png" class="i-01"></image>
                <view>注意事项</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.note"></u-parse>
            </view>
        </view>
        
        <view class="list" v-if="data.tips">
            <view class="list-title">
                <image src="../../static/icon/i_07.png" class="i-01"></image>
                <view>温馨提示</view>
            </view>
            <view class="list-text">
                <u-parse :html="data.tips"></u-parse>
            </view>
        </view>
        <!-- status 1活动进行中（报名未结束）、2进行中（报名已结束）、 3活动已结束 -->
        <view class="footer" v-if="data.status == 1" @click="toSign">立即报名</view>
        <view class="footer end" v-else-if="data.status == 2">报名已结束</view>
        <view class="footer end" v-else>活动已结束</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                data: {},
                percent: 0,
            };
        },
        onLoad(option) {
            var _this = this;
            this.id = option.id
            this.getData()
            this.$ajax('config', {
            	 url: location.href.split('#')[0],
            }).then(ret => {
            	uni.hideLoading()
            	if (ret.success == 1000) {
            		_this.$wx.config({
            		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            		    appId: ret.detail.jsApiList.appId, // 必填，公众号的唯一标识
            		    timestamp: ret.detail.jsApiList.timestamp, // 必填，生成签名的时间戳
            		    nonceStr: ret.detail.jsApiList.nonceStr, // 必填，生成签名的随机串
            		    signature: ret.detail.jsApiList.signature, // 必填，签名
            		    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','updateAppMessageShareData','updateTimelineShareData'], 
            		});
                    
                    _this.share()
            	} else {
            		that.$toast(ret.msg);
            	}
            });
        },
        methods: {
            toSign() {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                } else {
                    this.$gTo(`/pages/activity/sign?id=${this.id}&money=${this.data.money}`)
                }
            },
            
            share() {
                var _this = this;
                _this.$wx.ready(function() {
                    _this.$wx.onMenuShareTimeline({
                        title: _this.data.title, // 分享标题
                        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: "https://gzh.mzwhcb.cn/image/tab.png", // 分享图标
                        success: function () {
                        // 用户点击了分享后执行的回调函数
                        }
                    });
                    _this.$wx.onMenuShareAppMessage({
                        title: _this.data.title, // 分享标题
                        desc: '', // 分享描述
                        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: "https://gzh.mzwhcb.cn/image/tab.png", // 分享图标
                        success: function () {
                        // 用户点击了分享后执行的回调函数
                        }
                    });
                })
            },
            
            getData() {
            	this.$ajax('activity_detail', {
            		user_token: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail
                        this.percent = parseInt((this.data.num / this.data.enroll_num) * 100)
                        // console.log(this.percent)
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding-bottom: 100px;
    }
    .index-img{
        width: 750rpx;
        height: 375rpx;
    }
    .wrapper{
        background-color: #fff;
        border-radius: 25rpx 25rpx 0 0;
        padding: 40rpx 20rpx 0;
        margin-top: -20rpx;
        position: relative;
        z-index: 0;
    }
    .name-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 40rpx;
    }
    .img-01{
        width: 92rpx;
        height: 36rpx;
        margin-right: 10rpx;
    }
    .name{
        font-size: 40rpx;
        font-weight: bold;
        flex: 1;
    }
    .sub{
        font-size: 26rpx;
        word-break: break-all;
        white-space: pre-line;
        padding-bottom: 20rpx;
    }
    .num-box{
        padding: 30rpx 25rpx;
        background-color: #f7f8fc;
        border-radius: 15rpx;
        font-size: 24rpx;
        color: #5a5a5b;
    }
    .male-icon{
        width: 23rpx;
        height: 23rpx;
        margin-right: 13rpx;
    }
    .num-box-down{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .line{
        width: 200rpx;
    }
    .sy-num{
        padding-left: 15rpx;
    }
    .sy-num>text{
        font-size: 28rpx;
        color: #ffcb66;
        display: inline-block;
        transform: skew(-15deg);
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
    }
    .p-tb{
        padding: 30rpx 0;
    }
    .border-b{
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 15rpx;
        border-right: 2rpx solid #e6e6e6;
    }
    .time-03{
        width: 32rpx;
        height: 32rpx;
        margin-right: 15rpx;
    }
    .time{
        flex: 1;
        padding-left: 15rpx;
    }
    .i-08{
        width: 35rpx;
        height: 35rpx;
        margin-left: 30rpx;
    }
    
    .list{
        padding: 40rpx 20rpx 0;
    }
    .list-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        padding-bottom: 25rpx;
    }
    .i-01{
        width: 36rpx;
        height: 36rpx;
        margin-right: 15rpx;
    }
    .list-text{
        padding: 40rpx 25rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    
    .footer{
        width: 100vw;
        height: 93rpx;
        background-color: #40bef1;
        font-size: 36rpx;
        color: #fff;
        text-align: center;
        line-height: 93rpx;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1;
    }
    .end{
        background-color: #808080;
    }
    

</style>
